<template>
  <div>
    <template v-if="isCreate">
      <create :editData="editData" :btnName="btnName" @send-data="getData"></create>
    </template>

    <template v-else>
      <div>
        <Search :search="search" :reset="reset" class="searchClass">
          <template v-slot:body>
            <el-form-item label="物料编码" prop="productname">
              <el-input v-model="query.productname"  />
              <!-- <el-select v-model="query.productname" class="sel" allow-create filterable :reserve-keyword="true" clearable>
                <el-option v-for="item in materielList" :key="item.id" :label="item.fnumber" :value="item.id"></el-option>
              </el-select> -->
            </el-form-item>
          </template>
        </Search>

        <div class="table-default">
          <div class="btnBox">
            <el-button type="primary" size="default" @click="goDetail('保存新增')" >新增</el-button>
            <el-switch class="switch" v-model="changeFlag" inline-prompt active-text="展开" inactive-text="收缩" size="large" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dcdfe6" />
          </div>
          <el-table
            ref="tableRef"
            :data="tableData"
            class="mt-3"
            v-loading="loading"
            :default-expand-all="expandFlag"
            row-key="id"
            :tree-props="{ children: 'detailscheck_all', hasChildren: 'hasChildren' }"
            border
            :row-style="{ height: '0' }"
          >
            <!-- <el-table-column prop="id" label="行号" min-width="100" /> -->
            <el-table-column prop="productname" label="物料编码" min-width="150" />
            <el-table-column prop="fname" label="物料名称" min-width="200" />
            <el-table-column prop="completecheck" label="检测方式" min-width="100">
              <template #default="scope">
                <el-tag class="ml-2" type="success" v-if="scope.row.completecheck == '0'">抽检</el-tag>
                <el-tag class="ml-2" type="warning" v-if="scope.row.completecheck == '1'">全检</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="testitem" label="测试项目" min-width="180" />
            <el-table-column prop="testmethod" label="测试方法" min-width="200" />
            <el-table-column prop="teststandard" label="测试合格标准" min-width="150" />
            <el-table-column prop="remarks" label="备注" min-width="150" />
            <el-table-column prop="created_id" label="创建者" min-width="150" />
            <el-table-column prop="created_at" label="创建时间" min-width="150" />

            <el-table-column label="操作" width="200" fixed="right">
              <template #default="scope">
                <!-- {{ tableData[scope.$index].detailscheck_all }} -->
                <!-- <el-button type="success" @click="editHandler(scope.row)" class="btn" v-if="scope.row.detailscheck_all">修改</el-button> -->
                <el-button class="el-button el-button--primary el-button--small" type="success" @click="goDetail('保存修改', scope.row)"  v-if="scope.row.detailscheck_all">修改</el-button>

                <Destroy @click="destroy(api, scope.row.id)" v-if="scope.row.detailscheck_all" />
              </template>
            </el-table-column>
          </el-table>
          <Paginate />
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import create from './create.vue'
import storage from '/admin/utils/storage'
import http from '/admin/support/http'
import { routerKey } from 'vue-router'
import { useRouter, useRoute } from 'vue-router'
import {setTableHeight} from '/admin/utils/setHeight.js'


const route = useRoute()
const router = useRouter()
const api = 'inspection/inspection'
// const api = 'inspection/materiel'

const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data)

const isCreate = ref(false)
const hasChildren = ref(true)
const editData = ref({})
const btnName = ref('')
let tableRef = ref(null)
let expandFlag = ref(false)

let changeFlag = ref(false)

watch(changeFlag, newVal => {
  console.log(newVal)

  // tableRef.value.toggleAllSelection()
  if (newVal == true) {
    console.log(tableRef.value)
    console.log(tableRef.value.store.states.data.value)
    tableRef.value.store.states.data.value.forEach(row => {
      tableRef.value.toggleRowExpansion(row, true)
    })
  } else {
    tableRef.value.store.states.data.value.forEach(row => {
      tableRef.value.toggleRowExpansion(row, false)
    })
  }
})

let selectedValue = ref('')
let showDropdown = ref(false)

let playDropdown = () => {
  showDropdown.value = true
}
let hideDropdown = () => {
  setTimeout(() => {
    showDropdown.value = false
  }, 200)
}

const goDetail = (value, data) => {
  // console.log('当前详情数据',data);

  if (data) data = JSON.stringify(data)
  // console.log('当前详情数据JSON',data);

  router.push({ path: '/base/inspectionDetail', query: { btnName: value, detailData: data } })
}

const editHandler = data => {
  console.log('选中要修改的数据:', data)
  isCreate.value = true
  console.log(data)
  editData.value = data
  btnName.value = '确认编辑'
}

const createHandler = () => {
  isCreate.value = true
  btnName.value = '保存新增'
}
// let materielList = ref([])


const getData = () => {
  isCreate.value = false
  search()
}

onMounted(() => {
  search()
  deleted(reset)
  setTableHeight('.table-default')

})
</script>

<style>
.el-table {
  height: 80%;
}
.searchClass {
  /* padding-bottom: 20px; */
}
.btnBox {
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
